<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家居医生网</title>
    <script src="lib/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="head">
        <img src="images/logo.png" alt="">
    </div>
    <div class="nav">
        <div class="nav-body">
            <div class="nav-left">
               
                <img src="images/location.png" alt="">
                <p>深圳<切换></p>
            </div>
            <div class="nav-mid">
                <ul>
                    <li>首页</li>
                    <li>资讯</li>
                    <li>测评</li>
                    <li>商城</li>
                </ul>
            </div>
            <div class="nav-right">
                <div class="adm">
                    <img src="images/adm.png" alt="">
                </div>             
                <p>个人中心</p>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="body-left">
            </a>
                <ul><li class="center click-1 click">用户中心首页</li></ul>
            </a>
            <ul>
                <p class="title">我的检测</p></a>
                <li class="menu">上门检测</li></a>
                <li class="menu">DIY 检测</li></a>
            </ul>
            <ul>
                <p class="title">我的治理</p></a>
                <li class="menu">上门治理</li></a>
            </ul>
            <ul>
                <p class="title">我的装修</p></a>
                <li class="menu">装修方案</li></a>
            </ul>
            <ul>
                <p class="title">我的收藏</p></a>
                <li class="menu">装修材料</li></a>
                <li class="menu">净化产品</li></a>
                <li class="menu">资讯</li></a>
                <li class="menu">测评</li></a>
            </ul>
            <ul>
                <p class="title">个人资料</p></a>
                <li class="menu">个人资料</li></a>
                <li class="menu">修改密码</li></a>
                <li class="menu click-2">绑定手机\微信</li></a>
            </ul>
            <ul>
                <p class="title">积分管理</p></a>
                <li class="menu">积分兑换</li></a>
                <li class="menu">积分等级</li></a>
                <li class="menu">积分任务</li></a>
            </ul>
        </div>
        <script>
            $(".body-left li").click(function(){
                $(".body-left li").removeClass("click")
                $(this).addClass("click")
            })
        </script>
        <div class="body-right">
            <div class="message">
                <div class="message-left">
                    <div class="portrait"></div>
                    <div class="user">
                        <p>用户名</p>
                        <p>积分值：198分</p>
                        <p>我的消息：0条</p>
                    </div>
                </div>
                <div class="message-right">
                    <div class="mobile mobile1">
                        <div class="bangding">
                            <p>微信绑定</p>
                            <p>未绑定</p>
                            <p>立即绑定</p>
                        </div>
                    </div>
                    <div class="mobile mobile2">
                        <div class="bangding">
                            <p>手机号码绑定</p>
                            <p>未绑定</p>
                            <p>立即绑定</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="password">
                <div class="change">
                    <p>修改密码</p>
                </div>
                <div class="binding binding1">
                    <div class="mobileDevices">
                        <p>手机号绑定</p>
                        <p>您还未绑定手机号</p>
                    </div>
                    <button class="btn">立即绑定</button>
                </div>
                <div class="binding binding2">
                    <div class="mobileDevices">
                        <p>微信绑定</p>
                        <p>您还未绑定微信号</p>
                    </div>
                    <button class="btn">立即绑定</button>
                </div>
            </div>
        </div>
        <script>
            $(".click-2").click(function(){
                $(".password").css({display:"block"})
                $(".message").css({display:"none"})
                $("html").animate({scrollTop:"0"},1000)
            })
            $(".click-1").click(function(){
                $(".message").css({display:"block"})
                $(".password").css({display:"none"})
            })
        </script>

    </div>
    <div class="foot">
        <div class="foot-body">
            <div class="foot-body-left">
                <img src="images/footerLogo.png" alt="">
                <p>为室内环境健康把好每一关</p>
                <p>家居医生致力于中国人的家居健康问题，通过专业的技术研究和测评，倾力于协助大众打造绿色、环保的人居住生活环境。</p>
            </div>
            <div class="foot-body-mid">
                <p>关于我们</p>
                <p>版权说明</p>
                <p>联系我们</p>
                <p>用户隐私</p>
                <p>加入我们</p>                
                <p>免费申请</p>
            </div>
            <div class="foot-body-right">
                <p class="Wchat">官方微信</p>
                <p class="tianmao">天猫旗舰店</p>
                <p class="shop">有赞商城</p>
            </div>
        </div>
        <div class="foot-bottom">
            <p>深圳建筑科学研究院股份有限公司           家居医生网</p>
            <p>粤ICP备08011321号 ©Copyright All Rights Reserved</p>
        </div>
    </div>
    
</body>
</html>